<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/area-selector.css">
</head>
<body ng-controller="mainCtrl">
	<!-- <button ng-click="showVal()">mainCtrl</button> -->

	<area-selector area-list="area[1].areaList" area-value="area[1].areaValue" level="1"></area-selector>
	<area-selector area-list="area[2].areaList" area-value="area[2].areaValue" level="2"></area-selector>
	<area-selector area-list="area[3].areaList" area-value="area[3].areaValue" level="3"></area-selector>
<button ng-click="logValue()">log value</button>

<!-- 	<div test-click test-name="aaa">click me!</div>
 -->
	<script type="text/javascript" src="lib/mockjs/mock.js"></script>
	<script type="text/javascript" src="js/mock.js"></script>
	<script type="text/javascript" src="lib/angularjs/angular.js"></script>
	<script>
		angular.module('myApp', [])
		.controller('mainCtrl', ['$scope','$http', function($scope,$http){
			// $scope.name = "mainCtrl";
			// $scope.aaa = "333";
			// $scope.showVal = function(){
			// 	console.log($scope.aaa)
			// }
			$scope.area = {
				1: {
					areaList: [],
					areaValue: {areaName:'请选择省'}
				},
				2: {
					areaList: [],
					areaValue: {areaName:'请选择市'}
				},
				3: {
					areaList: [],
					areaValue: {areaName:'请选择区'}
				}
			}

			$scope.logValue = function(){
				console.log($scope.areaValue);
			}

			$scope.$on('area-selected',function(e,item,level){
				var apiMap = ['getProvinces','getCities','getCounties'];
				if(level<3){
					$http.get('/api/' + apiMap[level+1],{
						params: {
							areaId: item.areaId
						}
					}).then(res=>{
						$scope.area[level+1].areaList = res.data.data.areaList;
					});
				}
			});

			$http.get('/api/getProvinces').then(res=>{
				$scope.area[1].areaList = res.data.data.areaList;
			});
		}])
		.directive('areaSelector', [function(){
			return {
				template: '	<div class="select-wrapper">\
								<div class="select-text" ng-click="togglePanel()">\
									<span class="text">{{areaValue.areaName}}</span>\
									<span class="icon"></span>\
								</div>\
								<ul class="select-panel" ng-show="showPanel">\
									<li ng-repeat="item in areaList" ng-click="selectArea(item)">{{item.areaName}}</li>\
								</ul>\
							</div>',
				restrict: 'E',
				scope: {
					areaList: '=',
					areaValue: '='
				},
				replace: true,
				link: function($scope, ele, attrs, controller) {
					//console.log(attrs);
					$scope.showPanel = false;
					$scope.togglePanel = function(){
						$scope.showPanel = !$scope.showPanel;
					}
					$scope.selectArea = function(item){
						$scope.areaValue = item;
						$scope.showPanel = false;
						$scope.$emit('area-selected',item,attrs.level);
					}
					// ele.on('click',function(){
					// 	// console.log($scope.testName);
					// 	$scope.$apply(function(){
					// 		$scope.testName = '444';
					// 	});
					// });
				}
			};
		}]);
	</script>
</body>
</html>